<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        :root {
            --background-rgb: 2 6 23;
            --background-light-rgb: 30 41 59;

            --border-rgb: 255 255 255;
            --border: 1px solid rgb(var(--border-rgb) / 20%);

            --hyperplexed-main-rgb: 41 121 255;
            --hyperplexed-main-light-rgb: 56 182 255;
            --hyperplexed-secondary-rgb: 42 252 152;

            --card-size: 480px;
            --font-size: 0.8rem;
            --logo-size: calc(var(--card-size) * 0.3);
        }

        body {
            background: rgb(var(--background-rgb));
            height: 100vh;
            display: flex;
            justify-content: center;
            overflow: hidden;
            font-family: 'Noto Sans', sans-serif;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .card-track {
            height: 100%;
            width: var(--card-size);
            display: flex;
            align-items: center;
            position: relative;
        }

        .card-wrapper {
            width: 100%;
            position: relative;
        }

        .card {
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1;
            position: relative;
            margin: 1rem;
            border-radius: 2rem;
            overflow: hidden;
            cursor: pointer;
        }

        .card-image {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 4;
        }

        .card-image>img {
            width: var(--logo-size);
        }

        .card-gradient {
            height: 100%;
            width: 100%;
            position: absolute;
            background: radial-gradient(rgb(var(--background-light-rgb)) 40%,
                    rgb(var(--hyperplexed-main-rgb)) 50%,
                    rgb(var(--hyperplexed-main-light-rgb)),
                    rgb(var(--hyperplexed-secondary-rgb)));
            mix-blend-mode: darken;
            pointer-events: none;
            z-index: 3;
        }

        .card-letters {
            --x: 0px;
            --y: 0px;
            position: absolute;
            left: 0px;
            top: 0px;
            height: 100%;
            width: 100%;
            color: white;
            font-size: var(--font-size);
            font-weight: 500;
            word-wrap: break-word;
            opacity: 0;
            transition: opacity 400ms;
            /* -webkit-mask-image: radial-gradient(calc(var(--card-size) * 0.8) circle at var(--x) var(--y),
                    rgb(255 255 255) 20%,
                    rgb(255 255 255 / 25%),
                    transparent); */
            scale: 1.03;
        }

        .card:hover .card-letters {
            opacity: 1;
        }

        @media(max-width: 600px) {
            :root {
                --card-size: 340px;
            }

            .card {
                border-radius: 1rem;
            }
        }

        /* -- Extra Styles -- */

        .card-track:before,
        .card-track:after {
            content: "";
            height: 100vh;
            width: 1px;
            position: absolute;
            top: 50%;
            translate: 0% -50%;
        }

        .card-track:before {
            left: -1px;
            border-left: var(--border);
        }

        .card-track:after {
            right: -1px;
            border-right: var(--border);
        }

        .card-wrapper:before,
        .card-wrapper:after {
            content: "";
            width: 100vw;
            position: absolute;
            left: 50%;
            translate: -50%;
        }

        .card-wrapper:before {
            top: -1px;
            border-top: var(--border);
        }

        .card-wrapper:after {
            bottom: -1px;
            border-bottom: var(--border);
        }

        .card-corners {
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 3;
            pointer-events: none;
        }

        .card-corners>.card-corner {
            display: block;
            height: 9px;
            width: 1px;
            position: absolute;
            background-color: white;
        }

        .card-corners>.card-corner:after {
            content: "";
            width: 9px;
            height: 1px;
            position: absolute;
            left: -4px;
            top: 4px;
            background-color: white;
        }

        .card-corners>.card-corner:nth-child(1) {
            left: -1px;
            top: -5px;
        }

        .card-corners>.card-corner:nth-child(2) {
            right: -1px;
            top: -5px;
        }

        .card-corners>.card-corner:nth-child(3) {
            right: -1px;
            bottom: -5px;
        }

        .card-corners>.card-corner:nth-child(4) {
            left: -1px;
            bottom: -5px;
        }
    </style>
</head>

<body>
    <div class="card-track">
        <div class="card-wrapper">
            <div class="card">
                <div class="card-image">
                    <img src="https://assets.codepen.io/1468070/Hyperplexed+Logo+-+Color+5.svg" />
                </div>
                <div class="card-gradient"></div>
                <div class="card-letters"></div>
            </div>
            <div class="card-corners">
                <span class="card-corner"></span>
                <span class="card-corner"></span>
                <span class="card-corner"></span>
                <span class="card-corner"></span>
            </div>
        </div>
    </div>
</body>
<script>
    const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

    const randomChar = () => chars[Math.floor(Math.random() * (chars.length - 1))],
        randomString = length => Array.from(Array(length)).map(randomChar).join("");

    const card = document.querySelector(".card"),
        letters = card.querySelector(".card-letters");

    const handleOnMove = e => {
        const rect = card.getBoundingClientRect(),
            x = e.clientX - rect.left,
            y = e.clientY - rect.top;

        letters.style.setProperty("--x", `${x}px`);
        letters.style.setProperty("--y", `${y}px`);

        letters.innerText = randomString(1500);
    }

    card.onmousemove = e => handleOnMove(e);

    card.ontouchmove = e => handleOnMove(e.touches[0]);
</script>

</html>